<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Registration Form</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container signinForm"> 
        <div class="form signup">
            <h2>注册</h2>
            <div class="inputBox">
                <input type="text" required="required">
                <i class="fa-regular fa-user"></i>
                <span>用户名</span>
            </div>
            <div class="inputBox">
                <input type="text" required="required">
                <i class="fa-regular fa-envelope"></i>
                <span>电子邮件</span>
            </div>
            <div class="inputBox">
                <input type="password" required="required">
                <i class="fa-solid fa-lock"></i>
                <span>密码</span>
            </div>
            <div class="inputBox">
                <input type="password" required="required">
                <i class="fa-solid fa-lock"></i>
                <span>确认密码</span>
            </div>
            <div class="inputBox">
                <input type="submit" value="创建账户">
            </div>
            <p>已经是会员？ <a href="#" class="login">登录</a></p>
        </div>
        <div class="form signin">
            <h2>登录</h2>
            <div class="inputBox">
                <input type="text" required="required">
                <i class="fa-regular fa-user"></i>
                <span>用户名</span>
            </div>
            <div class="inputBox">
                <input type="password" required="required">
                <i class="fa-solid fa-lock"></i>
                <span>密码</span>
            </div>
            <p>未注册？<a href="#" class="create">创建账户</a></p>
        </div>
    </div>
    
    <script>
    const login = document.querySelector('.login'), 
        create = document.querySelector('.create'),
        container = document.querySelector('.container');
    login.addEventListener('click', function(){ 
        container.classList.add('signinForm')
    })
        create.addEventListener('click', function(){
        container.classList.remove('signinForm')
    })
    </script>
    
</body>
</html>